<template>
 <div class="page-box">
 	<div class="page-title">
    <div class="returnPage" @click="returnPage">返回</div>
  </div>
  <div class="page-main">
   <!-- 左1行 -->
   <div class="flex-grid-left">
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/finance/title1.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="grid-chart charH">
       <barLinePublic class="charH"
                v-if="echarData01.legendData.length > 0"
                :housingSupplyStatsData="echarData01"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/finance/title2.png" alt="">
     </div>
     <div class="page-grid-ec">

      <div class="grid-chart charH">
       <barLinePublic class="charH"
                v-if="echarData02.legendData.length > 0"
                :housingSupplyStatsData="echarData02"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
   </div>
   <!-- center -->
   <div class="page-main-map" style="position:relative">
    <div class="mapBox">
      <mapBox
          v-if="realEstateMiddleData.regions[0].length > 0"
          :housingSupplyStatsData="realEstateMiddleData"
          @mapNameChange="mapNameChange"
          style="height: 100%; width: 100%"
      ></mapBox>
      <div class="map-address">辽宁省{{ cityObj.cityName == "" ? "" : "-" + cityObj.cityName }}</div>
    </div>
    <div class="my-list">
      <table-list
            class="tListH"
            :housingSupplyStatsData="personHouseMiddleListData"
            style="width: 100%; height: 100%"
      ></table-list>
    </div>
    <div class="filter">
    <el-checkbox v-model="radioList" :value="1" label="剔除预收款的资产负债率大于70%" size="large" @change="radioValue" />
    <el-checkbox v-model="radioList" :value="2" label="净负债率大于100" size="large" @change="radioValue" />
    <el-checkbox v-model="radioList" :value="3" label="现金短债比小于一倍" size="large" @change="radioValue" />
    </div>
   </div>
   <!-- 右1行 -->
   <div class="page-main-right">
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/finance/title7.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="grid-chart charH">
        <barLinePublic class="charH"
                v-if="echarData07.legendData.length > 0"
                :housingSupplyStatsData="echarData07"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
   </div>
   <!-- 左2行 -->
   <div class="flex-grid-left">
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/finance/title3.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="time-pic relative">
       <div class="time-com absolute"> {{Data03.times[0]}}至{{Data03.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="3" timeType="1"  @timeValueChange="timeValueChanges" ></timeSelect>
       </div>
      </div>
      <div class="grid-chart charHT">
       <barCrosswise class="charHT"
                v-if="echarData03.legendData.length > 0"
                :housingSupplyStatsData="echarData03"
                @dialogData="dialogData"
        ></barCrosswise>
      </div>
     </div>
    </div>
    <div class="page-grid ">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/finance/title4.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="grid-chart charH">
        <barStacked class="charH"
                v-if="echarData04.legendData.length > 0"
                :housingSupplyStatsData="echarData04"
                @dialogData="dialogData"
        ></barStacked>
      </div>
     </div>
    </div>
   </div>
   <!-- 右2行 -->
   <div class="page-main-right">
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/finance/title8.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="time-pic relative">
       <div class="time-com absolute"> {{Data08.times[0]}}至{{Data08.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="8" timeType="1"  @timeValueChange="timeValueChanges" ></timeSelect>
       </div>
      </div>
      <div class="grid-chart charHT">
        <usePie  class="charH" :housingSupplyStatsData="echarData08" v-if="echarData08.seriesData.length > 0" @dialogPieData="dialogPieData" ></usePie>
      </div>
     </div>
    </div>
   </div>
   <!-- 左3行 -->
   <div class="flex-grid-left">
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/finance/title5.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="time-pic relative">
       <div class="time-com absolute"> {{Data05.times[0]}}至{{Data05.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="5" timeType="1"  @timeValueChange="timeValueChanges" ></timeSelect>
       </div>
      </div>
      <div class="grid-chart charHT">
        <usePie  class="charHT" :housingSupplyStatsData="echarData05" v-if="echarData05.seriesData.length > 0"  @dialogPieData="dialogPieData"></usePie>
      </div>
     </div>
    </div>
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/finance/title6.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="grid-chart charH">
        <barLinePublic class="charH"
                v-if="echarData06.legendData.length > 0"
                :housingSupplyStatsData="echarData06"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
   </div>
   <!-- 右3行 -->
   <div class="flex-grid-left">
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/finance/title9.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="grid-chart charH">
       <barLinePublic class="charH"
                v-if="echarData09.legendData.length > 0"
                :housingSupplyStatsData="echarData09"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/finance/title10.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="grid-chart charH">
       <barLinePublic class="charH"
                v-if="echarData10.legendData.length > 0"
                :housingSupplyStatsData="echarData10"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
   </div>
  </div>
  <magnify
    v-if="magnifyEchartData"
    :housingSupplyStatsData="magnifyEchartData"
    @closeDialog="closeDialog"
  ></magnify>
  <magnifyPie
    v-if="magnifyPieEchartData"
    :housingSupplyStatsData="magnifyPieEchartData"
    @closePieDialog="closePieDialog"
  ></magnifyPie>
 </div>
</template>

<script setup lang="ts">
import { ref,reactive, onMounted, onBeforeUnmount, computed } from 'vue';
import { barLineParamsData } from "@/utils/chartsPbulic";
import mapBox from "@/components/realEstate/map.vue";
import tableList from "@/components/realEstate/tableList.vue";
import usePie from "@/components/public/pie.vue";
import barLinePublic from "@/components/realEstate/barLinePbulic.vue";
import barCrosswise from "@/components/realEstate/barCrosswise.vue";
import barStacked from "@/components/realEstate/barStacked.vue";
import timeSelect from "@/components/realEstate/timeSelect.vue";
import magnify from "@/components/public/magnify.vue";
import magnifyPie from "@/components/public/magnifyPie.vue";
import {useRouter} from 'vue-router'
import { getCityName } from '@/utils/cityList'

import {
  selectTaxAndBudget,
  selectLoansAndDealMoney,
  selectInvestmentStatistics,
  selectLoansStatistics,
  selectLoansTypeStatistics,
  selectLoansTypeTrend,
  selectThermodynamic,
  selectDevelopersInvestorTrend,
  selectDevelopersInvestorMoneySource,
  selectSmallLoansIllegalTrend,
  selectAddPersonalLoansTrend,
  selectSupplyList,
} from "@/api/realEstate/finance";

// 初始化数据
const fixedCityCode =   localStorage.getItem("cityCode")
const router=useRouter()
const echarData01 = ref({//保障住房项目分析
    legendData: [],
})
const echarData02 = ref({//新增个人住房贷款与住房成交金额统计
    legendData: [],
})
const echarData03 = ref({//房地产开发投资统计
    legendData: [],
})
const echarData04 = ref({//房地产贷款与金融机构人民币各项贷款统计
    legendData: [],
})
const echarData05 = ref({//房地产贷款情况统计
   seriesData: [],
})
const echarData06 = ref({//房地产贷款情况走势
    legendData: [],
})
const echarData07 = ref({//全省房地产开发投资走势
    legendData: [],
})
const echarData08 = ref({//全省房地产开发投资资金来源统计
    seriesData: [],
})
const echarData09 = ref({//小额贷款违规流入房地产走势
    legendData: [],
})
const echarData10 = ref({//新增个人住房贷款走势
    legendData: [],
})
const Data01 = ref({
  times:[]
})
const Data02 = ref({
  times:[]
})
const Data03 = ref({
  times:[]
})
const Data04 = ref({
  times:[]
})
const Data05 = ref({
  times:[]
})
const Data06 = ref({
  times:[]
})
const Data07 = ref({
  times:[]
})
const Data08 = ref({
  times:[]
})
const Data09 = ref({
  times:[]
})
const Data10 = ref({
  times:[]
})
const realEstateMiddleData = ref({//地图
  regions: [[]],
});
const magnifyEchartData = ref(null)//放大框
const magnifyPieEchartData = ref(null)//饼图放大框
const cityObj = ref({
  cityName: "",
  cityCode: "",
});
const personHouseMiddleListData = ref({
  list: [],
});
const radioList = ref([])
//房地产税收与一般公共预算收入
const getEcharData01 = async() => {
  let { data } = await selectTaxAndBudget({ cityCode: cityObj.value.cityCode,startMonth:Data01.value.times[0],endMonth:Data01.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
 let legendStyle = {
    show: true,
    icon:'',
    left: 0,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "13%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "收入总额(万元)",
        type: "1",
      },
      {
        name: "占比",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#F0C44B",
        b: "#E38319",
      },
            {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData01.value = paramsData
}
//新增个人住房贷款与住房成交金额统计
const getEcharData02 = async() => {
  let { data } = await selectLoansAndDealMoney({ cityCode: cityObj.value.cityCode,startMonth:Data02.value.times[0],endMonth:Data02.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon: "rect",
    left: 0,
    top: 8,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "13%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "金额(万元)",
        type: "1",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#24E1E7",
        b: "#086063",
      },
      {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData02.value = paramsData
}
//房地产开发投资统计
const getEcharData03 = async() => {
  let { data } = await selectInvestmentStatistics({ cityCode: cityObj.value.cityCode,startMonth:Data03.value.times[0],endMonth:Data03.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: false,
  };
  let gridConfig = {
    left: "3%",
    right: "10%",
    bottom: "3%",
    top: "5%",
  };
  let paramsData = barLineParamsData(
    ['新增个人住房贷款','住房成交金额'],
    data.abscissaList,
    [
      {
        name: "金额(万元)",
        type: "1",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    data.columnList,
    [
      {
        a: "#183FB9",
        b: "#4F73E7",
      },
      {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData03.value = paramsData
}
//房地产贷款与金融机构人民币各项贷款统计
const getEcharData04 = async() => {
  let { data } = await selectLoansStatistics({ cityCode: cityObj.value.cityCode,startMonth:Data04.value.times[0],endMonth:Data04.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon: "rect",
    left: 0,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "13%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "金额(万元)",
        type: "1",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "one",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "two",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "one",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "two",
      },
    ],
    data.brokenList,
    [
      {
        a: "#54BAEA",
        b: "#094385",
      },
      {
        a: "#EFC24A",
        b: "#E4871C",
      },
      {
        a: "#4F73E7",
        b: "#183FB9",
      },
      {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData04.value = paramsData
}
//房地产贷款情况统计
const getEcharData05 = async() => {
 let { data } = await selectLoansTypeStatistics({cityCode: cityObj.value.cityCode,startMonth:Data05.value.times[0],endMonth:Data05.value.times[1]});
 let colors = ['#2586EE','#F0C34B','#E4871D','#F0C34B','#E4871D']
 data.resultList.map((i,index) => {
   i.itemStyle = {color: colors[index]}
 })
 let paramsData = {
      gridStyle:{
        show:true
      },
      legendStyle:{
        show: true,
        icon: "rect",
        left:0,
        top:5,
        bottom: 0,
        right:0,
        itemWidth: 12,
        itemHeight: 12,
        itemGap:3,
    },
     seriesStyle:{
        radius: [0, 80],
        center: ['50%', '60%'],
        minAngle: pxToRem(10),
        labelLine: {
            show: true,//数据标签引导线
            length:1,
        },
        emphasis: {
        },
        label: {
          show: false,

        }

    },
    seriesData:[data.resultList]      
 }
 echarData05.value = paramsData
}
//房地产贷款情况走势
const getEcharData06 = async() => {
  let { data } = await selectLoansTypeTrend({ cityCode: cityObj.value.cityCode,startMonth:Data06.value.times[0],endMonth:Data06.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 1
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon:'',
    left: 0,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "13%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "金额(万元)",
        type: "1",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#E55151",
        b: "#E55151",
      },
      {
        a: "#E4871D",
        b: "#E4871D",
      },
            {
        a: "#24E0E6",
        b: "#24E0E6",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData06.value = paramsData
}
//全省房地产开发投资走势
const getEcharData07 = async() => {
  let { data } = await selectDevelopersInvestorTrend({ cityCode: cityObj.value.cityCode,startMonth:Data07.value.times[0],endMonth:Data07.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
 let legendStyle = {
    show: true,
    icon:'',
    left: 7,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "2%",
    right: "3%",
    bottom: "13%",
    top: "26%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "金额(万元)",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#F0C44B",
        b: "#E38319",
      },
            {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData07.value = paramsData
}
//全省房地产开发投资资金来源统计
const getEcharData08 = async() => {
 let { data } = await selectDevelopersInvestorMoneySource({ cityCode: cityObj.value.cityCode,startMonth:Data08.value.times[0],endMonth:Data08.value.times[1]});
 let colors = ['#2586EE','#F0C34B','#E4871D','#F0C34B','#E4871D']
 data.resultList.map((i,index) => {
   i.itemStyle = {color: colors[index]}
 })
 let paramsData = {
      gridStyle:{
        show:true
      },
      legendStyle:{
        show: true,
        orient:'vertical',
        icon: "rect",
        top:15,
        bottom: 0,
        right:100,
        itemWidth: 12,
        itemHeight: 12,
        itemGap:20,
        formatter:function(name){
         let total = 0;
         let target;
         let rate;
          for (var i = 0; i < data.resultList.length; i++) {
            total += data.resultList[i].value;
            if (data.resultList[i].name == name) {
               target = data.resultList[i].value;
               rate = data.resultList[i].rate;
            }
         }
          return `{one|${name}}{two|${target}亿}{three|${rate}%}`;
        },

    },
     seriesStyle:{
        radius: [70, 105],
        center: ['25%', '42%'],
        minAngle: pxToRem(10),
        emphasis: {
        },
        label: {
        show: false,
        position: 'center'
       },
        emphasis: {
          label: {
            show: true,
            fontSize: pxToRem(20),
            color: '#Fff',
            formatter: '{b} \n\n{c}'
          }
        },

    },
    seriesData:[data.resultList]      
 }
 echarData08.value = paramsData
}
//小额贷款违规流入房地产走势
const getEcharData09 = async() => {
  let { data } = await selectSmallLoansIllegalTrend({ cityCode: cityObj.value.cityCode,startMonth:Data09.value.times[0],endMonth:Data09.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon: "rect",
    left: 0,
    top: 8,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "13%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "金额(万元)",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#F0C44B",
        b: "#E38319",
      },
      {
        a: "#24E0E6",
        b: "#24E0E6",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData09.value = paramsData
}
//新增个人住房贷款走势
const getEcharData10 = async() => {
  let { data } = await selectAddPersonalLoansTrend({ cityCode: cityObj.value.cityCode,startMonth:Data10.value.times[0],endMonth:Data10.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon: "rect",
    left: 0,
    top: 8,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "13%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "金额(万元)",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
      {
        a: "#4E73E6",
        b: "#4E73E6",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData10.value = paramsData
}
// 获取时间组件时间
const timeValueChanges = (va) => {
 if(va.type == 1){
  Data01.value.times = va.times
  getEcharData01()
 }else if(va.type == 2) {
  Data02.value.times = va.times
  getEcharData02()
 }else if(va.type == 3) {
  Data03.value.times = va.times
  getEcharData03()
 }else if(va.type == 4) {
  Data04.value.times = va.times
  getEcharData04()
 }else if(va.type == 5) {
  Data05.value.times = va.times
  getEcharData05()
 }else if(va.type == 6) {
  Data06.value.times = va.times
  getEcharData06()
 }else if(va.type == 7) {
  Data07.value.times = va.times
  getEcharData07()
 }else if(va.type == 8) {
  Data08.value.times = va.times
  getEcharData08()
 }else if(va.type == 9) {
  Data09.value.times = va.times
  getEcharData09()
 }else if(va.type == 10) {
  Data10.value.times = va.times
  getEcharData10()
 }
}
// 地图
const realEstateMiddle = async() => {
  let { data } = await selectThermodynamic({ adcode: cityObj.value.cityCode });
  let inventoryRegionDTOS = data.map((item: any) => ({
    name: item.cityName,
    value: [item.houseCount,item.peopleCount],
    code: item.cityCode,
    selected: fixedCityCode == item.cityCode ? true:false,
  }));
  let seriesData = [ inventoryRegionDTOS];
  let paramsData = {
    regions: seriesData,
  };
  realEstateMiddleData.value = paramsData
}
// 获取城市名
const mapNameChange = (e) => {
  if (cityObj.value.cityName == e.cityName) {
    cityObj.value = {
      cityName: "",
      cityCode: "",
    };
    allFun();
  } else {
    cityObj.value = e;
    allFun();
  }
}
//列表
const getSelectSupplyList = async() => {
  let showTypeList = radioList.value
  let { data } = await selectSupplyList({ cityCode: cityObj.value.cityCode,showTypeList:showTypeList});
  personHouseMiddleListData.value.list = data;
}
//筛选值
const radioValue = (id) => {
  getSelectSupplyList()
}
//合并柱状折线图数据
const getLineBarArr = (policy: Array<number>,resul: Array<number>): Array<any>=>{
  let type = []
  for(let i = 0 ; i< policy.length;i++){
    type.push(1)
  }
  for(let i = 0 ; i < resul.length;i++){
    type.push(2);
    policy.push(resul[i]);
  }
  return[policy,type]

}
// 初始化时间
const defaultTime = () => {
  let t = new Date()
  let tYear = t.getFullYear()
  let tMonth1 = t.getMonth()
  let tMonth2 = t.getMonth()+1
  let tArr = []
  if(tMonth1 < 10){
    tMonth1 = '0' + tMonth1
  }
  if(tMonth2 < 10){
    tMonth2 = '0' + tMonth2
  }
  Data01.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data02.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data03.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data04.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data05.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data06.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data07.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data08.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data09.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data10.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]

}
// 字体自适应方法
const pxToRem = (px: number) => {
  const scale = document.documentElement.clientWidth / 1920;
  return Math.round(px * Math.min(scale, 3));
};
// 打开弹框
const dialogData = (val) => {
  magnifyEchartData.value = val
}
//关闭弹框
const closeDialog = (val) => {
  magnifyEchartData.value = null
}
// 打开饼图弹框
const dialogPieData = (val) => {
  magnifyPieEchartData.value = val
}
//关闭饼图弹框
const closePieDialog = (val) => {
  magnifyPieEchartData.value = null
}
// 返回
const returnPage = (val) => {
  router.go(-1);
}
const allFun = () => {
 defaultTime()
 getEcharData01()
 getEcharData02()
 getEcharData03()
 getEcharData04()
 getEcharData05()
 getEcharData06()
 getEcharData07()
 getEcharData08()
 getEcharData09()
 getEcharData10()
 realEstateMiddle()
 getSelectSupplyList()
}
allFun();
onMounted(() => {
  cityObj.value = getCityName(fixedCityCode)
});

</script>
<style  scoped lang="less">
.page-box{
 width: 100vw;
 height: 100vh;
 background-image: url('../../../assets/img/realEstate/pageBg.png');
 background-size: 100% 100%;
 background-repeat: no-repeat;
 overflow: hidden;
 .page-title{
  width: 100vw;
  height: 85px;
  margin-bottom: 26px;
  background-image: url('../../../assets/img/realEstate/finance/headBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
 }
 .page-main{
  width: 100vw;
  height: calc(100vh - 111px);
  display: grid;
  grid-template-columns: repeat(3, 600px);
  grid-template-rows: repeat(3, 300px);
  grid-gap: 20px 10px;
  place-content: start center;
  box-sizing: border-box;
  .page-main-map{
      grid-column: 2 / 2;
      grid-row: 1 / 4;
    .mapBox{
      height:450px;
    }
    .my-list{
      margin-top: 25px;
    }
    .filter{
      margin-top:20px;
      background: rgba(27,126,242,0.2);
      border-radius: 0px 0px 0px 0px;
      border: 2px solid rgba(27,126,242,0.4);
      font-size:16px;
      display: flex;
      padding:15px 14px;
      position: absolute;
      bottom: 0px;
      width: 100%;
    }
  }
  .flex-grid-left{
   display: flex;
   justify-content: space-between;
   .page-grid{
    width: 49%;
    .page-grid-title{
     height: 34px;
     width: 100%;
     margin-bottom: 3px;
     img{
      width: 100%;
      height: 100%;
     }
    }
    .page-grid-ec{
     background: rgba(27,126,242,0.1);
     border-radius: 0px 0px 0px 0px;
     border: 1px solid rgba(27,126,242,0.4);
     .time-pic{
      height: 31px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
      .time-com{
       padding-left: 15px;
       height: 20px;
       background: rgba(27,126,242,0.2);
       border-radius: 0px 0px 0px 0px;
       border: 1px solid rgba(41,240,250,0.6);
       font-weight: 400;
       font-size: 12px;
       color: #FFFFFF;
       letter-spacing: 1px;
       text-align: right;
        img{
          width: 9px;
          height: 6px;
          position: relative;
          bottom: 2px;
          margin-right: 4px;
        }
      }
      .time-com:hover{
        cursor: pointer;
      }
     }
    }
   }
  }
  .page-main-right{
    .page-grid{
    width: 100%;
    .page-grid-title{
     height: 34px;
     width: 100%;
     margin-bottom: 3px;
     img{
      width: 100%;
      height: 100%;
     }
    }
    .page-grid-ec{
     background: rgba(27,126,242,0.1);
     border-radius: 0px 0px 0px 0px;
     border: 1px solid rgba(27,126,242,0.4);
     .time-pic{
      height: 31px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
      .time-com{
       padding-left: 15px;
       height: 16px;
       background: rgba(27,126,242,0.2);
       border-radius: 0px 0px 0px 0px;
       border: 1px solid rgba(41,240,250,0.6);
       font-weight: 400;
       font-size: 12px;
       color: #FFFFFF;
       letter-spacing: 1px;
       text-align: right;
        img{
          width: 9px;
          height: 6px;
          position: relative;
          bottom: 2px;
          margin-right: 4px;
        }
      }
      .time-com:hover{
        cursor: pointer;
      }
     }
    }
   }
  }
 }
}
.map-address {
  position: absolute;
  top: 0px;
  left: 0px;
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px #c1731c;
  font-size: 18px;
  color: #60f9f4;
  letter-spacing: 1.2px;
  margin-left: 27px;
}

.map-address::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -27px;
  width: 20px;
  height: 20px;
  background: url("@/assets/img/personInfor/map-address.png");
  background-size: 100% 100%;
}
.charH{
    height: 261px;
}
.charHT{
    height: 230px;
}
/deep/ .el-range-editor.el-input__wrapper{
  width: 135px ;
  height: 16px;
  position: absolute;
  top: 0px;
  right:0px;
}
/deep/ .el-radio.el-radio--large {
  color:white;
  margin-right:18px;
}
</style>